---
type: integration
title: '@astrojs/svelte'
description: "Apprenez à utiliser l'intégration de framework @astrojs/svelte pour étendre la prise en charge des composants dans votre projet Astro."
sidebar:
  label: Svelte
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/svelte/'
category: renderer
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Since from '~/components/Since.astro';

Cette **[intégration Astro][astro-integration]** permet le rendu et l'hydratation côté client pour vos composants [Svelte](https://svelte.dev/) 5. Pour la prise en charge de Svelte 3 et 4, installez `@astrojs/svelte@5` à la place.

## Installation

Astro inclut une commande `astro add` pour automatiser l'installation des intégrations officielles. Si vous préférez, vous pouvez [installer les intégrations manuellement](#installation-manuelle) à la place.

Pour installer `@astrojs/svelte`, exécutez ce qui suit depuis le répertoire de votre projet et suivez les instructions :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npx astro add svelte
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm astro add svelte
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn astro add svelte
    ```
  </Fragment>
</PackageManagerTabs>

Si vous rencontrez des problèmes, [n'hésitez pas à nous les signaler sur GitHub](https://github.com/withastro/astro/issues) et essayez les étapes d'installation manuelle ci-dessous.

### Installation manuelle

Tout d'abord, installez le paquet `@astrojs/svelte` :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install @astrojs/svelte
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add @astrojs/svelte
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add @astrojs/svelte
    ```
  </Fragment>
</PackageManagerTabs>

La plupart des gestionnaires de paquets installent également les dépendances associées. Si vous voyez un avertissement `Cannot find package 'svelte'` (ou similaire) lorsque vous démarrez Astro, vous devez installer Svelte et Typescript :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install svelte typescript
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add svelte typescript
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add svelte typescript
    ```
  </Fragment>
</PackageManagerTabs>

Ensuite, appliquez l'intégration à votre fichier `astro.config.*` en utilisant la propriété `integrations` :

```js title="astro.config.mjs" ins={2} ins="svelte()"
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  // ...
  integrations: [svelte()],
});
```

Et créez un nouveau fichier appelé `svelte.config.js` dans le répertoire racine de votre projet et ajoutez le code suivant :

```js title="svelte.config.js"
import { vitePreprocess } from '@astrojs/svelte';

export default {
  preprocess: vitePreprocess(),
}
```

## Démarrage

Pour utiliser votre premier composant Svelte dans Astro, consultez notre [documentation sur les frameworks UI][astro-ui-frameworks]. Vous y découvrirez :

* 📦 comment les composants du framework sont chargés,
* 💧 les options d'hydratation côté client, et
* 🤝 les possibilités de mélanger et d'imbriquer les frameworks entre eux

## Options

Cette intégration est alimentée par `@sveltejs/vite-plugin-svelte`. Pour personnaliser le compilateur Svelte, des options peuvent être fournies à l'intégration. Voir la [documentation de `@sveltejs/vite-plugin-svelte`](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/config.md) pour plus de détails.

Vous pouvez définir des options soit en les passant à l'intégration `svelte` dans `astro.config.mjs`, soit dans `svelte.config.js`. Les options dans `astro.config.mjs` auront la priorité sur les options dans `svelte.config.js` si les deux sont présentes :

```js title="astro.config.mjs" "extensions: ['.svelte']"
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  integrations: [svelte({ extensions: ['.svelte'] })],
});
```

```js title="svelte.config.js"
export default {
  extensions: ['.svelte'],
};
```

## Préprocesseurs

<Since v="2.0.0" pkg="@astrojs/svelte" />

Si vous utilisez SCSS ou Stylus dans vos fichiers Svelte, vous pouvez créer un fichier `svelte.config.js` afin qu'ils soient préalablement traités par Svelte, et que l'extension Svelte pour les IDE puisse analyser correctement les fichiers Svelte.

```js title="svelte.config.js"
import { vitePreprocess } from '@astrojs/svelte';

export default {
  preprocess: vitePreprocess(),
};
```

Ce fichier de configuration sera automatiquement ajouté lorsque vous lancerez `astro add svelte`. Voir la [documentation de `@sveltejs/vite-plugin-svelte`](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/preprocess.md) pour plus de détails sur `vitePreprocess`.

[astro-integration]: /fr/guides/integrations-guide/

[astro-ui-frameworks]: /fr/guides/framework-components/#utilisation-des-composants-de-framework
